<template>
  <div class="message-item" :data-index="index">
    <SystemMessage v-if="isSystem()" :source="source" />
    <SelfMessage v-else-if="isSelf()" :source="source" />
    <NormalMessage v-else :source="source" />
  </div>
</template>

<script setup lang="ts">
import NormalMessage from './message/normal.vue'
import SelfMessage from './message/self.vue'
import SystemMessage from './message/system.vue'

type Props = {
  index: Number
  source: any
  userId: number
}

const props = defineProps<Props>()

const isSystem = () => {
  return props.source.messageType === 2
}

const isSelf = () => {
  return String(props.source.senderId) === String(props.userId)
}
</script>

<style scoped lang="less">
.message-item {
  margin-bottom: 13px;
}
</style>
